<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>allinone carousel演示(powerful皮肤/响应式)_素材火</title>

<style>
body { overflow-x: hidden; }
#containingDiv { width: 960px; margin: 0 auto; }
@media screen and (min-width:1200px) {
  #containingDiv { width: 960px; margin: 0 auto; }
}
@media screen and (max-width:767px) {
  #containingDiv { width: 100%; margin: 0 auto; }
}
</style>

<link rel="stylesheet" href="css/allinone_carousel.css">

<style>
.allinone_carousel.powerful .elementTitle {
    position:absolute;
    top:365px;
    left:0;
    width:100%;
    color:#7f7f7f;
    text-align:center;
    text-transform:uppercase;
    font: bold 16px/25px 'Droid Sans', Verdana, Helvetica, sans-serif;
}
.text {
    position:absolute;
    left:0;
    width:100%;
    color:#7f7f7f;
    text-align:center;
    text-transform:none;
    font-weight:normal;
}
</style>

<script src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
<script src="js/jquery-ui-1.10.2.min.js"></script>
<script src="js/allinone_carousel.js"></script>

<script>
$(function() {
    $('#allinone_carousel_powerful').allinone_carousel({
        skin: 'powerful',
        width: 980,
        height: 500,
        responsive: true,
        autoPlay: 3,
        resizeImages: true,
        autoHideBottomNav: false,
        //easing:'easeOutBounce',
        numberOfVisibleItems: 5,
        elementsHorizontalSpacing: 110,
        elementsVerticalSpacing: 25,
        verticalAdjustment: 145,
        animationTime: 0.6,
        showPreviewThumbs: false,
        showCircleTimer: false,
        nextPrevMarginTop: -52,
        playMovieMarginTop: 0,
        bottomNavMarginBottom: -10
    });
});
</script>
</head>

<body>
<h1>allinone carousel演示(powerful皮肤/响应式)</h1>

<!-- 代码开始 -->
<div id="bannerBg" style="background-color: #7A337F;">
	<div id="containingDiv">
		<div id="allinone_carousel_powerful">
			<div class="myloader"></div>
			<ul class="allinone_carousel_list">
				<li data-title="Lorem ipsum dolor sit amet, consectetur <br><span class='text'>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>"><img src="images/powerful/01_powerful.png" alt="" /></li>
				<li data-link="http://codecanyon.net/user/LambertGroup?ref=LambertGroup" data-target="_blank" data-title="Excepteur sint occaecat cupidatat non proident <br><span class='text'> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</span>"><img src="images/powerful/02_powerful.png" alt="" /></li>
				<li data-title="Lorem ipsum dolor sit amet, consectetur <br><span class='text'>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</span>"><img src="images/powerful/03_powerful.png" alt="" /></li>
				<li data-title="Culpa qui officia deserunt mollit anim id est <br><span class='text'>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>"><img src="images/powerful/04_powerful.png" alt="" /></li>
				<li data-title="Lorem ipsum dolor sit amet, consectetur <br><span class='text'>Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</span>"><img src="images/powerful/05_powerful.png" alt="" /></li>
				<li data-title="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam"><img src="images/powerful/06_powerful.png" alt="" /></li>
				<li data-title="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti"><img src="images/powerful/07_powerful.png" alt="" /></li>
			</ul>
		</div>
	</div>
</div> 
<!-- 代码结束 -->









<!-- 以下是统计和广告，与演示无关，不必理会 -->
<p style="text-align: center; color: #f60;">你可以在不同的设备中或改变窗口大小查看本演示</p>
<style type="text/css">
body { margin: 0;}
h1 { margin: 40px 10px; font: 32px Microsoft Yahei; text-align: center;}

.vad { margin:50px 0 5px; font-family: arial,宋体,sans-serif; text-align:center;}
.vad a { display:inline-block; height: 30px; line-height: 30px; margin:0 5px; padding:0 20px; font-size:14px; text-align:center; color:#eee; text-decoration:none; background-color:#222;}
.vad a:hover { color:#fff; background-color:#000;}

.a728x90 { width: 728px; height: 90px; margin: 0 auto;}
</style>

<p class="vad"><a href="http://www.sucaihuo.com/" target="_blank">sucaihuo.com</a> <a href="http://www.sucaihuo.com/js/249.html" target="_blank">说 明</a> <a href="http://www.sucaihuo.com/js/249.html" target="_blank">下 载</a></p>


</body>
</html>